<template>
    <div class="doctor_cell" @click="lookDetail">
        <div class="avatar">
            <li-image :src="info.logo" v-if="info.logo" :alt="`${$cookies.get('city')}-${info.name}`"></li-image>
            <van-image :src="require('@/assets/images/avatar.png')" class="img" round lazy-load :alt="`${$cookies.get('city')}-${info.name}`" v-else />
            <img src="@/assets/images/rz.png" class="rz" alt="" v-if="info.hasCertified == 1" />
        </div>
        <div class="info">
            <div class="title">
                <span class="name">{{ info.name }}</span>
                <span class="sub">{{ info.personalTitle }}</span>
            </div>
            <div class="rate">
                <span class="num">从业经验{{ info.workYears }}年</span>
            </div>
            <div class="tag_list">
                <span class="name">擅长：</span>
                <template v-for="(item, index) in getProjects(info.expertProject)">
                    <div class="tag" :key="`project_${index}`" v-if="index < 4">{{ item }}</div>
                </template>
                <!-- <div class="tag">阴性矫正</div>
                            <div class="tag">根管治疗</div> -->
            </div>
        </div>
        <slot name="button" />
</div>
</template>
<script>
export default {
    name: 'FocusDoctor',
    props: {
        info: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    data() {
        return {}
    },
    created() {

    },
    methods: {
        // 查看详情
        lookDetail(row) {
            this.$router.push({
                path: `/doctor/detail/${this.info.id}`
            })
        },

        // 处理项目
        getProjects(str) {
            if (!str) {
                return []
            }
            let arr = str.split(',');
            return arr;
        }

    }
}
</script>
<style lang="less" scoped>
.doctor_cell {
    position: relative;
    // min-height: 100px;
    min-height: 80px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
    margin: 8px 12px;
    display: flex;
    padding: 8px;
    box-sizing: border-box;

    .avatar {
        position: relative;
        width: 64px;
        flex-shrink: 0;

        .img {
            width: 64px;
            height: 64px;
            border-radius: 100%;
            overflow: hidden;
        }

        .rz {
            position: absolute;
            width: 16px;
            height: 16px;
            right: 0;
            bottom: 0;
        }
    }

    .info {
        margin-left: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
            font-size: 14px;
            font-weight: 500;
            color: #333;

            .sub {
                font-size: 12px;
                font-weight: 400;
                margin-left: 8px;
            }
        }

        .rate {
            display: flex;
            font-size: 11px;
            font-weight: 400;
            color: #666;

            .van_rate,
            .star,
            .num {
                flex-shrink: 0;
            }
        }

        .tag_list {
            display: flex;

            .name {
                font-size: 11px;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
                padding: 2px 4px;
            }

            .tag {
                font-size: 10px;
                font-weight: 400;
                color: rgba(125, 126, 128, 1);
                border-radius: 2px;
                border: 0.5px solid #ECEDF1;
                padding: 2px 4px;
                margin: 0 8px 0 0;
            }
        }
    }
}
</style>